<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{ margin: 0;padding: 0;}
			ul,li{ list-style: none;}
			ul{  width: 80%; margin: 100px auto; padding: 10px 20px; }
			li{ width: 100%;  height: 80px; border-bottom: 1px solid #ddd; display: table; }
			li span{ width: 16%;  vertical-align: middle; display: table-cell;}
			li button{ width: 30px; height: 30px; cursor: pointer;}
			li .num input{ width: 27px; height: 27px; text-align: center; }
			li .delete,
			#allDelete a{ border: 1px solid #eee; background-color: #aaa; padding: 3px 4px; border-radius:5px; color:red; text-decoration: none;}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<span>选择</span>
				<span>商品名称</span>
				<span>价格</span>
				<span>数量</span>
				<span>合计</span>
				<span>操作</span>
			</li>
			<li>
				<span>
					<input type="checkbox"  class="icon" />
				</span>
				<span >电脑</span>
				<span class="price"><b>100</b>元</span>
				<span class="num">
					<button class="reduce">-</button>
					<input type="text" readonly value="2" />
					<button class="add">+</button>
				</span>
				<span class="rowPrice">¥ <b>100</b></span>
				<span>
					<a href="javascript:;" class="delete">删除</a>
				</span>
			</li>
			<li>
				<span>
					<input type="checkbox"  class="icon"/>
				</span>
				<span >苹果手机7</span>
				<span class="price"><b>7000</b>元</span>
				<span class="num">
					<button class="reduce">-</button>
					<input type="text" readonly value="3" />
					<button class="add">+</button>
				</span>
				<span class="rowPrice">¥ <b>200</b></span>
				<span>
					<a href="javascript:;" class="delete">删除</a>
				</span>
			</li>
			<li>
				<span>
					<input type="checkbox"  class="icon"/>
				</span>
				<span >张三</span>
				<span class="price"><b>7000</b>元</span>
				<span class="num">
					<button class="reduce">-</button>
					<input type="text" readonly value="1" />
					<button class="add">+</button>
				</span>
				<span  class="rowPrice">¥ <b>300</b></span>
				<span>
					<a href="javascript:;" class="delete">删除</a>
				</span>
			</li>
			<li>
				<span>
					<input type="checkbox"  class="icon"/>
				</span>
				<span >相机</span>
				<span class="price"><b>3000</b>元</span>
				<span class="num">
					<button class="reduce">-</button>
					<input type="text"  readonly value="1" />
					<button class="add">+</button>
				</span>
				<span class="rowPrice">¥ <b>400</b></span>
				<span>
					<a href="javascript:;" class="delete">删除</a>
				</span>
			</li>
			<li class="allInfo">
				<span>
					<label>
						<input type="checkbox"  class="iconAll" />全选
					</label>
				</span>
				<span></span>
				<span></span>
				<span id="allNum">已经选择总数： <b>0</b></span>
				<span id="allPrice">¥ <b></b></span>
				<span id="allDelete">
					<a href="javascript:;">全部删除</a>
				</span>
			</li>
		</ul>
	</body>
</html>
